<template>
	<view class="exprotPrivateKey">
		<HeaderBar title="备份私钥" showBack fixed />
		<view class="contentBox">
			<!-- <view class="navTab">
				<view class="navLeft" :class="{'active':active==1}" @tap="tabNav(1)">
					手抄备份
				</view>
				<view class="navRight" :class="{'active':active==2}" @tap="tabNav(2)">
					KeyPal Card备份
				</view>
			</view> -->
			<view class="navCar1">
				<view class="navTilp">
				私钥未加密，请谨慎导出，做好安全备份！做私钥备份时，请确保周边没有其他人！
				</view>
				<view class="privatekey_box">
					<view class="code_box" @click="lookQRCode">
						<view class="Mask" v-if="isShowQRCode">
							<view class="carmera_box">
								<view class="carmera">
									<image src="../../static/images/login/camera.png" mode="widthFix" class="icon">
									</image>
								</view>
								<view class="c_text">
									请确认周围无人及摄像头
								</view>
							</view>
						</view>
						<QRCode v-if="qrText" :value="qrText" :size="340" backgroundColor="#FFF"
							foregroundColor="#000" />
					</view>
					<view class="">
						<view class="line-container">
							<view class="line"></view>
							<text class="center-text">明文私钥</text>
							<view class="line"></view>
						</view>
						<view class="privatekey_content">
							<view class="Mask" v-show="isShow" @tap="look">
								<view class="carmera_box">
									<view class="carmera">
										<image src="../../static/images/login/camera.png" mode="widthFix" class="icon">
										</image>
									</view>
									<view class="c_text">

										请确认周围无人及摄像头
									</view>
								</view>
							</view>
							<view class="privatekey" @tap="look">
								{{qrText}}
							</view>
						</view>
					</view>
					<view class="btn">
						<view class="" @tap="copy">
							复制私钥
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		aesDecrypt
	} from '@/static/script/security.js'
	export default {
		data() {
			return {
				active: 1,
				isShowQRCode: true,
				isShow: true,
				tabIndex: true,
				config: {},
				account: {}
			};
		},
		computed: {
			choinInfo() {
				return this.$store.getters.choinInfo
			},
			addressInfo() {
				return this.$store.getters.addressInfo
			},
			qrText() {
				if (this.addressInfo) {
					const decryptedPrivateKey = aesDecrypt(this.addressInfo.privateKey, this.addressInfo.password);
					return decryptedPrivateKey
				}
				return ''
			}

		},
		methods: {
			tabClick() {
				this.tabIndex = !this.tabIndex
			},
			tabNav(num) {
				this.active = num;
			},
			lookQRCode() {
				this.isShowQRCode = !this.isShowQRCode
			},
			look() {
				this.isShow = !this.isShow
			},
			copy() {
				uni.setClipboardData({
					data: this.qrText,
					success: function() {
						uni.showToast({
							title: '复制成功',
							position: "bottom",
							icon: "none",
							duration: 2000
						});
					}
				});
			},
		}
	}
</script>


<style lang="scss" scoped>
	.exprotPrivateKey {

		.contentBox {
			margin-top: 40upx;
			padding: 0 40upx;

			.navTab {
				background: #E9EAEC;
				padding: 8upx 22upx;
				text-align: center;
				display: flex;
				font-size: 26upx;
				border-radius: 20upx;

				.navLeft {
					flex: 1;
					line-height: 72upx;
				}

				.navRight {
					flex: 1;
					line-height: 72upx;
				}

				.active {
					background: #FFF;
					border-radius: 20upx;
				}
			}

			.navCar1 {
				padding: 0 20upx 100upx;

				.navTilp {
					margin-top: 16upx;
					font-size: 26upx;
					color: #9F9F9F;
					font-weight: 400;
				}

				.privatekey_box {
					margin-top: 74upx;

					.line-container {
						margin-top: 80upx;
						display: flex;
						align-items: center;
						.center-text {
							font-size: 28upx;
							/* 文字大小 */
							color:#9F9F9F;
							/* 文字颜色 */
						}
						.line {
							flex: 1;
							height: 0.5px;
							background-color:#9F9F9F;
							/* 线的颜色 */
							margin: 0 20upx;
						}
					}




					.privatekey_content {
						margin-top: 40upx;
						width: 100%;
						height: 162upx;
						padding: 20upx 16upx;
						background: #F5F7F6;
						border-radius: 20upx;
						position: relative;
						box-sizing: border-box;

						.Mask {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
							background-color: #F5F7F6;
							// backdrop-filter: blur(10px);
							// -webkit-backdrop-filter: blur(10px);
							border-radius: 20upx;

							/* 可选的边框 */
							.carmera_box {
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;

								.carmera {
									display: flex;
									width: 64upx;
									height: 64upx;
									background: #FFEDED;
									border-radius: 47upx;
									justify-content: center;
									align-items: center;
									margin-bottom: 8upx;

									.icon {
										width: 48upx;
										height: 48upx;
									}
								}

								.c_text {
									font-size: 26upx;
									color: #3D3D3D;
								}
							}
						}

						.privatekey {
							height: 132upx;
							display: flex;
							align-items: center;
							justify-content: center;
							word-break: break-all;
							padding: 0 20upx;
							font-size: 28upx;
							text-align: center;
						}
					}

					.code_box {
						margin-top: 40upx;
						width: 100%;
						height: 532upx;
						background-color: #F5F7F6;
						border-radius: 20upx;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;

						.Mask {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
							background-color: #F5F7F6;
							z-index: 999;
							border-radius: 20upx;

							/* 可选的边框 */
							.carmera_box {
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;

								.carmera {
									display: flex;
									width: 94upx;
									height: 94upx;
									background: #FFEDED;
									border-radius: 47upx;
									justify-content: center;
									align-items: center;
									margin-bottom: 8upx;

									.icon {
										width: 48upx;
										height: 48upx;
									}
								}

								.c_text {
									font-size: 26upx;
									color: #3D3D3D;
								}
							}
						}
					}



					.btn {
						font-size: 26upx;
						color: #F6F6F6;
						line-height: 88upx;
						background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
						border-radius: 10upx;
						text-align: center;
						margin-top: 100upx;
						margin-bottom: 100upx;
					}
				}
			}

		}
	}
</style>